<template>
    <block v-if="scene == 1154">
        <pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="sunshinePage bg-fff col-3e">
            <view class="">
                <block v-if="kaiList.length > 0">
                    <up-tabs :list="kaiList" :current="currKai" lineColor="#007235" keyName="title" @click="changeKai"></up-tabs>

                    <view class="productTitle top-10 flex">
                        <view class="priceTableBtn bg-theme-opacity col-theme flex" @click="toOneHouseOnePriceAverage">
                            <u-icon name="order" color="#007235" size="14"></u-icon>
                            <text class="left-5 right-5">各楼栋一房一价分析</text>
                            <u-icon name="arrow-right" color="#007235" size="14"></u-icon>
                        </view>
                    </view>
                </block>
                
                <block v-if="kaiList.length > 0 && kaiList[currKai].list.length">
                    <view class="imgList flex">
                        <block v-for="(item, index) in kaiList[currKai].list" :key="index">
                            <view class="item bg-fff boxShow">
                                <view class="imageBox" @click="previewImages(index)">
                                    <image class="image" :lazy-load="true" :src="item.thumb" mode="aspectFill" />
                                </view>
                            </view>
                        </block>
                    </view>
                </block>
                <up-empty text="暂无数据" mode="list" marginTop="100" v-if="kaiList.length == 0 || kaiList[currKai].list.length == 0"></up-empty>
            </view>

			<!-- <bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar> -->

            <u-button :customStyle="customStyle" @click="toOneHouseOnePriceTable">智慧选房一房一价表</u-button>

            <up-gap :height="40" />
            <!-- <share-btn :display="scrollAnimate"></share-btn> -->
        </view>
    </block>
</template>
<script>
	import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
    import { panListAPI, priceTableAPI } from "@/common/api";
    // import { dispatchClient } from '@/common/api-adviser';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
		data() {
			return {
                customStyle: {
                    backgroundColor: '#007235',
                    color: '#ffffff',
                    position: 'fixed',
                    width: 'calc(100% - 56rpx)',
                    zIndex: 99,
                    left: '28rpx',
                    bottom: '50rpx'
                },
                currKai: 0,
                kaiList: [],
                kaiId: '',
                title: '',
				productId: '',
                share: false,
                start_time: 0,
                scrollAnimate: false,
                recommendAdviser: {}
            }
		},
        computed:{
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['scene', 'puid']),
            prevImgArr: function() {
                if(this.kaiList.length === 0) return [];
                if(this.kaiList[this.currKai].list && this.kaiList[this.currKai].list.length === 0) return [];
            	return this.kaiList[this.currKai].list.map(item => item.url);
            }
        },
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】-智慧选房一房一价图`,
                path: `/pages/product/one-house-one-price/one-house-one-price-image?productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=智慧选房一房一价图-${this.productId}-${this.title}`,
            }
        },
        
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `【${this.title}】-智慧选房一房一价图`,
                query: `productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=智慧选房一房一价图-${this.productId}-${this.title}`
            }
        },
        //#endif

        onAddToFavorites() {
            return {
                title: `【${this.title}】-智慧选房一房一价图`,
                imageUrl: 'https://image.srea.org.cn/xcx/xcx-share-image.jpg',
                query: `productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=智慧选房一房一价图-${this.productId}-${this.title}`
            }
        },
        
		onLoad(options) {
            const that = this;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            let { productId='', title='', kaiId='', puid='', share=false } = options;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            
            this.kaiId = kaiId&&kaiId!=='undefined'?kaiId:'';
            uni.$check_and_login(function () {
                that.init()
            })
		},

        methods: {
			...mapActions(useConfigStore, ['setPuid']),

            async init() {
                //绑定客户
                try {
                    // await dispatchClient({
                    //     share: this.share,
                    //     puid: this.puid,
                    //     pid: this.productId
                    // });

                    //获取开盘列表
                    let kaiRes = await panListAPI(this.productId);
                    if(kaiRes.status === 0) {
                        if(kaiRes.detail.length > 0) {
                            this.kaiList = kaiRes.detail.map(item => ({
                                ...item,
                                list: [],
                            }))
                            
                            //设置当前开盘下标,请求当前开盘一房一价图片
                            const findCurrKai = this.kaiList.findIndex(item => item.id == this.kaiId);
                            this.currKai = findCurrKai !== -1 ? findCurrKai : 0;
                        }
                    }else {
                        uni.$u.toast(kaiRes.detail)
                    }

                    this.getPriceImages();

                    //根据顾问ID获取被绑定的顾问信息
                    // if(this.puid && this.userInfo && this.puid !== this.userInfo.id) {
                    //     let sellInfoRes = await getSellerInfoById({id: this.puid, productId: this.productId});
                    //     if(sellInfoRes.status === 0) {
                    //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.productId) {
                    //             this.recommendAdviser = sellInfoRes.detail;
                    //         }
                    //     }
                    // }
                } catch (error) {
                }
            },

            //获取开盘对应的一房一价
            getPriceImages(){
                if(this.kaiList.length === 0) return;
                let currKaiItem = this.kaiList[this.currKai];
                if(currKaiItem.list.length > 0) {
                    return
                }
                priceTableAPI(currKaiItem.id).then(res => {
                	if(res.status === 0){
                        if(res.detail.image_list && res.detail.image_list.length > 0) {
                            currKaiItem.list = res.detail.image_list;
                        }
                        uni.hideLoading()
                	}else{
                        uni.hideLoading();
                        uni.$u.toast(res.detail);
                    }
                })
            },
            
            //切换开盘
            changeKai({index}){
                if(index === this.currKai) {
                    return
                }
                this.currKai = index;
                this.kaiId = this.kaiList[index].id;
                this.getPriceImages();
            },
            
            // 预览图片
            previewImages(index){
            	uni.previewImage({
            		current: index,
            		urls: this.prevImgArr,
            		longPressActions: {
            			itemList: ['发送给朋友', '保存图片', '收藏']
            		}
            	})
            },
            
            //一房一价表
            toOneHouseOnePriceTable(){
                uni.navigateTo({
                    url: `/pages/product/one-house-one-price/one-house-one-price-table?productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.puid}&prepage=一房一价表-${this.productId}-${this.title}`
                })
            },
            
            //各楼栋一房一价分析
            toOneHouseOnePriceAverage(){
                uni.navigateTo({
                    url: `/pages/product/one-house-one-price/one-house-one-price-column-average?productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&puid=${this.puid}&prepage=各楼栋一房一价分析-${this.productId}-${this.title}`
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.sunshinePage{
        line-height: 1;
        min-height: 100vh;
        overflow: hidden;
        .productTitle{
            justify-content: flex-end;
            padding: 0rpx 22rpx;
            .priceTableBtn{
                border-radius: 10rpx;
                padding: 10rpx 8rpx 10rpx 15rpx;
            }
        }
		
		.imgList{
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
	        margin: 0rpx 28rpx 60rpx 28rpx;
		}
		.item{
			width: calc(50% - 10rpx);
            height: 350rpx;
			margin-top: 30rpx;
            border-radius: 20rpx;
            overflow: hidden;
			.imageBox{
				text-align: left;
                height: 350rpx;
	            .image{
	                width: 100%;
                    height: 100%;
                    border-radius: 20rpx;
	            }
			}
		}
	}
</style>
